<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" href="css/index.css" />
</head>

<body>
	<div id="adminslist">
		<h2>管理员列表</h2>
		<el-form :inline="true" class="demo-form-inline">
			<el-form-item label="管理员姓名">
				<el-input v-model="adminsName" placeholder="姓名" clearable></el-input>
			</el-form-item>
			<el-form-item label="管理员身份">
				<el-select v-model="adminsState" placeholder="身份" clearable>
					<el-option label="初级管理员" value="0"></el-option>
					<el-option label="高级管理员" value="1"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" @click="getAdminsList">查询</el-button>
			</el-form-item>
		</el-form>

		<el-table :data="adminsList" style="width: 100%" stripe border>

			<el-table-column prop="adminsId" label="管理员编号" width="180" :disabled="true">
			</el-table-column>
			<el-table-column prop="adminsName" label="管理员姓名" width="180">
			</el-table-column>
			<el-table-column prop="adminsTel" label="管理员电话">
			</el-table-column>
			<el-table-column prop="adminsState" label="管理员身份" :formatter="formatState">
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button size="mini" @click="preUpdate(scope.$index, scope.row)">编辑</el-button>
					<el-button size="mini" type="danger" @click="deleteById(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
			:page-sizes="[2,5,10,20]" :page-size="size" layout="total, sizes, prev, pager, next, jumper" :total="total">
		</el-pagination>

		<el-dialog title="修改管理员" :visible.sync="dialogVisible" width="60%">
			<el-form ref="updateform" :model="adminsObj" label-width="100px" style="width:500px">
				<el-form-item label="管理员编号">
					<el-input v-model="adminsObj.adminsId" :disabled="true"></el-input>
				</el-form-item>
				<el-form-item label="管理员姓名" :required="true">
					<el-input v-model="adminsObj.adminsName"></el-input>
				</el-form-item>
				<el-form-item label="管理员密码" :required="true">
					<el-input v-model="adminsObj.adminsPwd" type="password" show-password disabled="true"></el-input>
				</el-form-item>

				<el-form-item label="管理员电话">
					<el-input v-model="adminsObj.adminsTel"></el-input>
				</el-form-item>
				<el-form-item label="管理员身份" :required="true">
					<el-select v-model="adminsObj.adminsState" placeholder="请选择管理员身份">
						<el-option label="初级管理员" value="0"></el-option>
						<el-option label="高级管理员" value="1"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="update">修改</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>

	</div>

	<script type="text/javascript" src="js/vue.js"></script>
	<script type="text/javascript" src="js/index.js"></script>
	<script type="text/javascript" src="js/axios.min.js"></script>

	<script type="text/javascript" src="js/common.js"></script>
	<script type="text/javascript">
		let v = new Vue({
			el: "#adminslist",
			data: {
				adminsList: [],
				currentPage: 1, //当前页码
				size: 2, //每页显示的条数
				total: -1, //总记录数
				adminsName: "",
				adminsState: "",
				dialogVisible: false,//控制 el-dialog是否显示
				adminsObj: {
					adminsId: "",
					adminsPwd: "",
					adminsName: "",
					adminsTel: "",
					adminsState: ""
				}
			},
			created() {
				this.getAdminsList();
			},
			methods: {
				getAdminsList: function () {
					let that = this;
					let str = "curPage=" + this.currentPage + "&size=" + this.size + "&adminsName=" + this.adminsName + "&adminsState=" + this.adminsState;
					axios.post("/admins/selectAllByNameStatePageInfo", str).then(function (r) {
						if (r.data.state == "success") {
							that.adminsList = r.data.adminslist;
							that.total = r.data.total;
						}
					});
				},
				formatState: function (row) { //格式化adminsState列   参数row--jsonObject
					if (row.adminsState == 0) {
						return "初级管理员";
					} else if (row.adminsState == 1) {
						return "高级管理员";
					}
					return "管理员";
				},
				handleSizeChange: function (val) { //val--size   size改变时
					this.size = val;
					this.getAdminsList();
				},
				handleCurrentChange: function (val) { //val--currentPage  当前页码改变时
					this.currentPage = val;
					this.getAdminsList();
				},
				deleteById: function (index, row) {//index 索引位置  row当前的jsonObject对象
					//js confirm 
					let aid = row.adminsId;
					let that = this;
					//						let aid2=this.adminsList[index].adminsId;
					//						alert("aid:"+aid+"--"+aid2);
					axios.get("/admins/delete?adminsId=" + aid).then(function (r) {
						if (r.data.state == "success") {
							that.$message.success("删除成功！");
							//当前页面 数据  删
							//删除这个索引位置的元素
							// splice js中的数组函数  参数1 索引位置  参数2 删除数量
							that.adminsList.splice(index, 1);
							
						}
					}).catch(function (error) {
						that.$message.error("删除失败！");
					})
				},
				preUpdate: function (index, row) {//准备修改
					this.dialogVisible = true;
					//表单元素设置默认值
					this.adminsObj = this.adminsList[index];
					this.adminsObj.adminsState = this.adminsObj.adminsState + "";
				},
				update: function () {
					let that = this;
					let fm = new FormData();
					if (this.adminsObj.adminsName + '' == "") {
						that.$message.error("请输入姓名");
					}
					else if (this.adminsObj.adminsPwd + '' == "") {
						that.$message.error("请输入密码");

					}
					else if (this.adminsObj.adminsState + '' == "") {
						that.$message.error("请选择身份");
					}
					else {

						fm.append("adminsId", this.adminsObj.adminsId);
						fm.append("adminsPwd", this.adminsObj.adminsPwd);
						fm.append("adminsName", this.adminsObj.adminsName);
						fm.append("adminsTel", this.adminsObj.adminsTel);
						fm.append("adminsState", this.adminsObj.adminsState);
						axios.post("/admins/update", fm).then(function (r) {
							//关闭修改对话框
							that.dialogVisible = false;
							that.$message.success("修改成功！");
						});
					}
				}
			}
		});
	</script>
</body>

</html>